﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddTemp.aspx.cs" Inherits="background.Manager.Enterprise.Forms.AddTemp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>创建表单模版</title>
    <link href="../../Styles/index.css" rel="stylesheet" />
    <style type="text/css">
        #text, #radio, #full, #checkbox, #upload, #date,#textarea { display: none; }
        #text { display: block; }
    </style>
    <script src="../../Scripts/jquery-1.8.2.min.js"></script>
    <script src="../../Scripts/layer/layer.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".tags ul li").click(function () {
                $(this).siblings().removeClass("tags_title_selected")
                $(this).addClass("tags_title_selected");
                $(".li_" + $(this).index()).siblings().hide();
                $(".li_" + $(this).index()).show();
            })
            $("input[name=temp]").click(function () {
                $(".group").hide();
                $("#" + $(this).val()).show();
            })
            var add = '<%=Request["groupid"] %>';
            if (add != "") {
                $(".tags ul li:eq(1)").click();
            }

        })
        function showRegx(chk) {
            if (chk) {
                $(".regx").show();
            } else {
                $(".regx").hide();
            }
        }
    </script>
</head>
<body>
    <div class="top">
        <strong>创建模版</strong>
        <span style="float: right"><a href="javascript:history.back();">
            <img src="../../Images/bak.png" />后退</a></span>
    </div>
    <div class="main">
        <!--表单提交-->
        <div class="tags">
            <ul>
                <li class="tagsli tags_title_selected">1.基本数据</li>
                <li class="tagsli">2.创建模版</li>
            </ul>
            <span id="tCount" style="display: none; margin-left: 2px; padding: 3px; background: #f00; color: #fff" title="题数量">0</span>
            <div style="clear: both"></div>
        </div>
        <div class="tags_content">
            <div class="li_0">
                <table border="0" cellpadding="0" cellspacing="0" class="table">
                    <tr>
                        <th>表单名称</th>
                        <td>
                            <input type="text" id="name" class="text" value="" /><i>* 表单或问卷的名字</i></td>
                    </tr>
                    <tr>
                        <th style="vertical-align: top;">表单描述</th>
                        <td>
                            <textarea style="width: 276px; height: 50px; line-height: 20px;" class="text" id="desc" maxlength="255"></textarea><i>简单介绍一下表单的功能</i></td>
                    </tr>
                    <%--<tr>
                        <th>开关</th>
                        <td>
                            <label>
                                <input type="radio" name="states" value="1" checked="checked" />启用</label>
                            &nbsp;&nbsp;
                    <label>
                        <input type="radio" name="states" value="0" />关闭</label>
                            &nbsp;
                    <i>关闭的表单，将不会在前台页面展示</i></td>
                    </tr>--%>
                    <tr>
                        <td></td>
                        <td>
                            <input type="hidden" id="serviceid" value="<%=Request["groupid"] %>" />
                            <input type="button" class="sbtn" value="创建表单" onclick="p.addTemp(this)" /></td>
                    </tr>
                </table>
            </div>
            <div class="li_1" style="display: none">
                <div style="border: 1px solid #909090; padding: 8px;">
                    控件类型：
                    <label>
                        <input type="radio" name="temp" value="text" checked="checked" />普通文本</label>
                    <label>
                        <input type="radio" name="temp" value="textarea" />文本域</label>
                    <label>
                        <input type="radio" name="temp" value="full" />图文编辑</label>
                    <label>
                        <input type="radio" name="temp" value="radio" />单选</label>
                    <label>
                        <input type="radio" name="temp" value="checkbox" />多选</label>
                    <label>
                        <input type="radio" name="temp" value="date" />日历</label>
                    <label>
                        <input type="radio" name="temp" value="upload" />上传</label>
                </div>
                <table id="upload" border="0" cellpadding="0" cellspacing="0" class="table group">
                    <tr>
                        <th>名称</th>
                        <td>
                            <input type="text" id="Text5" class="text" value="" /><label><input type="checkbox" value="" />必填</label>&nbsp;&nbsp;<i>* 例如：上传图片</i></td>
                    </tr>
                </table>
                <table id="date" border="0" cellpadding="0" cellspacing="0" class="table group">
                    <tr>
                        <th>名称</th>
                        <td>
                            <input type="text" id="Text4" class="text" value="" /><label><input type="checkbox" value="" />必填</label>&nbsp;&nbsp;<i>* 例如：选择日期</i></td>
                    </tr>
                    <tr>
                        <th>格式</th>
                        <td>
                            <input type="text" id="format" class="text" value="yyyy/MM/dd HH:mm:ss" /></td>
                    </tr>
                </table>
                <table id="checkbox" border="0" cellpadding="0" cellspacing="0" class="table group">
                    <tr>
                        <th>多选标题</th>
                        <td>
                            <input type="text" id="Text3" class="text" value="" /><label><input type="checkbox" value="" />必填</label>&nbsp;&nbsp;<i>* 例：你喜欢那个明星？</i>
                        </td>
                    </tr>
                    <tr>
                        <th></th>
                        <td style="line-height: 20px">
                            <p>
                                A：<input type="text" class="text checkbox" data-type="A" value="" style="width: 256px" /><i>例：刘德华</i>
                            </p>
                            <p>
                                B：<input type="text" class="text checkbox" data-type="B" value="" style="width: 256px" /><i>例：张学友</i>
                            </p>
                            <p>
                                C：<input type="text" class="text checkbox" data-type="C" value="" style="width: 256px" /><i>例：郭富城</i>
                            </p>
                            <p>
                                D：<input type="text" class="text checkbox" data-type="D" value="" style="width: 256px" /><i>例：黎明</i>
                            </p>
                            <p>
                                E：<input type="text" class="text checkbox" data-type="E" value="" style="width: 256px" />
                            </p>
                            <p>
                                F：<input type="text" class="text checkbox" data-type="F" value="" style="width: 256px" />
                            </p>
                        </td>
                    </tr>
                </table>
                <table id="radio" border="0" cellpadding="0" cellspacing="0" class="table group">
                    <tr>
                        <th>单选标题</th>
                        <td>
                            <input type="text" id="Text2" class="text" value="" /><label><input type="checkbox" value="" />必填</label>&nbsp;&nbsp;<i>* 例：1+1=？</i>

                        </td>
                    </tr>
                    <tr>
                        <th></th>
                        <td style="line-height: 20px">
                            <p>
                                A：<input type="text" class="text radio" data-type="A" value="" style="width: 256px" /><i>例：1</i>
                            </p>
                            <p>
                                B：<input type="text" class="text radio" data-type="B" value="" style="width: 256px" /><i>例：-1</i>
                            </p>
                            <p>
                                C：<input type="text" class="text radio" data-type="C" value="" style="width: 256px" /><i>例：2</i>
                            </p>
                            <p>
                                D：<input type="text" class="text radio" data-type="D" value="" style="width: 256px" /><i>例：5</i>
                            </p>
                            <p>
                                E：<input type="text" class="text radio" data-type="E" value="" style="width: 256px" />
                            </p>
                            <p>
                                F：<input type="text" class="text radio" data-type="F" value="" style="width: 256px" />
                            </p>
                        </td>
                    </tr>
                </table>
                <table id="full" border="0" cellpadding="0" cellspacing="0" class="table group">
                    <tr>
                        <th>名称</th>
                        <td>
                            <input type="text" id="Text1" class="text" value="" /><label><input type="checkbox" value="" />必填</label>&nbsp;&nbsp;<i>* 类似word的编辑器</i></td>
                    </tr>
                </table>
                <table id="textarea" border="0" cellpadding="0" cellspacing="0" class="table group">
                    <tr>
                        <th>名称</th>
                        <td>
                            <input type="text" id="Text6" class="text" value="" /><label><input type="checkbox" value="" />必填</label>&nbsp;&nbsp;<i>* 能换行</i></td>
                    </tr>
                </table>
                <table id="text" border="0" cellpadding="0" cellspacing="0" class="table group">
                    <tr>
                        <th>名称</th>
                        <td>
                            <input type="text" id="txt" class="text" value="" /><label><input type="checkbox" onchange="showRegx(this.checked)" value="" />必填</label>&nbsp;&nbsp;<i>* 例如：姓名，手机号</i></td>
                    </tr>
                    <tr class="regx" style="display: none">
                        <th>正则</th>
                        <td>
                            <input type="text" id="Regx" class="text" value="" /><i>空则用户在提交数据时不进行任何验证</i></td>
                    </tr>
                </table>
                <table id="Table1" border="0" cellpadding="0" cellspacing="0" class="table ">
                    <tr>
                        <th>是否显示</th>
                        <td>
                            <label>
                                <input type="radio" name="state" value="1" checked="checked" />是</label>
                            &nbsp;&nbsp;
                    <label>
                        <input type="radio" name="state" value="0" />否</label>
                            &nbsp;
                    <i>否，将不会在前台页面展示</i></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="button" class="sbtn" value="添加" onclick="p.add()" /></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var p = {
            addTemp: function (obj) {

                var _name = $("#name"),
                    _desc = $("#desc");
                if ($.trim(_name.val()).length == 0) { layer.msg("请输入名称"); _name.focus(); return; }
                $.post("Action/Temp.ashx", {
                    action: "CreateTable",
                    name: _name.val(),
                    desc: _desc.val()
                }, function (ret) {
                    if (ret == "") {
                        layer.msg("对不起保存失败", { icon: 2, time: 2000 })
                    } else {
                        //success
                        layer.msg("保存成功，进入第二步", { icon: 1, time: 2000 })
                        $(".tags ul li:eq(1)").click();
                        $(obj).hide();
                        $("#serviceid").val(ret);
                    }
                });
            },
            add: function () {
                if ($("#serviceid").val().length == 0) { layer.msg("错误：请先保存基本数据"); $(".tags ul li:eq(0)").click(); return; }
                var type = $("input[name=temp]:checked").val();
                var _name = $("#" + type + " input[type=text]:first");
                if ($.trim(_name.val()).length == 0) { layer.msg("请输入控件显示的名称"); _name.focus(); return; }

                var data = {
                    action: "AddTitle",
                    format: type,
                    serviceid: $("#serviceid").val(),
                    name: _name.val(),
                    Required: $("#" + type + " input[type=checkbox]").is(":checked") ? 1 : 0,
                    Display: $("input[name=state]:checked").val()
                }

                switch (type) {
                    case "text":
                        data["Regx"] = $("#Regx").val();
                        break;
                    case "date":
                        data["Regx"] = $("#format").val();
                        break;
                    case "textarea":
                    case "full":
                    case "upload":
                        data["Regx"] = "";
                        break;
                    case "radio":
                        var len = $(".radio[value!='']").length;
                        if (len < 2) { layer.msg("单选题最少设置2个选项"); return; }
                        var arr = new Array();
                        $(".radio").each(function () {
                            arr.push($(this).attr("data-type") + $(this).val());
                        })
                        data["list"] = arr.join('&^');
                        break;
                    case "checkbox":
                        var len = $(".checkbox[value!='']").length;
                        if (len < 2) { layer.msg("多选题最少设置2个选项"); return; }
                        var arr = new Array();
                        $(".checkbox").each(function () {
                            arr.push($(this).attr("data-type") + $(this).val());
                        })
                        data["list"] = arr.join('&^');
                        break;
                }
                $.post("Action/Temp.ashx", data, function (ret) {
                    if (ret == "true") {
                        $("#tCount").text(Number($("#tCount").text()) + 1).show();
                        layer.msg("恭喜您题目添加成功", { icon: 1, time: 2000 }, function () {
                            $("#" + type + " input").each(function () {
                                if ($(this).attr("type") == "text") {
                                    $(this).val('');
                                }
                                if ($(this).attr("type") == "checkbox") {
                                    $(this).removeAttr('checked');
                                }
                            })
                        })
                    } else {
                        layer.msg("对不起添加失败", { icon: 2, time: 2000 })
                    }
                })
            }
        }
    </script>
    <!--#include file='../../Include/footer.html'-->
</body>
</html>
